<template>
  <div class="doctorHospital">
    <!-- 医生医院doctorHospital -->
    <header>
      <van-icon name="arrow-left" @click="$router.go(-1)" />
      <ul class="tabBar">
        <li
          @click="currentId = 'doctor'"
          :class="currentId == 'doctor' ? 'active' : ''"
        >
          医生
        </li>
        <li
          @click="currentId = 'hospital'"
          :class="currentId == 'hospital' ? 'active' : ''"
        >
          医院
        </li>
      </ul>
      <van-icon name="search" />
    </header>
    <main>
      <div class="doctor" v-show="currentId == 'doctor'">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option1" />
          <van-dropdown-item v-model="value2" :options="option2" />
        </van-dropdown-menu>
      </div>
      <div class="hospital" v-show="currentId == 'hospital'">
        <div></div>
      </div>
    </main>
    <!-- <router-link :to="{ name: 'Home' }">X</router-link> -->
  </div>
</template>

<script>
export default {
  name: "doctorHospital",
  data() {
    return {
      currentId: "doctor",
      value1: 0,
      value2: "a",
      option1: [
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      option2: [
        { text: "默认排序", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.doctorHospital {
  height: 100%;
  font-size: 32px;
  header {
    height: 80px;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: yellow;
    ul {
      width: 180px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      li {
        width: 70px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        // background-color: red;
      }
      .active {
        border-bottom: 2px solid red;
      }
    }
  }
  // main {
  //   // .doctor {
  //   // }
  // }
}
</style>